<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="avatar">
				<text class="avatar-text">{{ username.charAt(0).toUpperCase() }}</text>
			</view>
			<view class="user-info">
				<text class="username">{{ username }}</text>
				<text class="user-subtitle">欢迎使用备忘录应用</text>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-container">
			<view class="stats-title">统计信息</view>
			
			<view class="stats-list">
				<!-- 待完成 -->
				<view class="stat-item" @tap="goToHome('pending')">
					<view class="stat-left">
						<text class="stat-label">待完成</text>
					</view>
					<text class="stat-number pending">{{ pendingCount }}</text>
				</view>
				
				<!-- 已完成 -->
				<view class="stat-item" @tap="goToHome('completed')">
					<view class="stat-left">
						<text class="stat-label">已完成</text>
					</view>
					<text class="stat-number completed">{{ completedCount }}</text>
				</view>
				
				<!-- 总计 -->
				<view class="stat-item" @tap="goToHome('all')">
					<view class="stat-left">
						<text class="stat-label">总计</text>
					</view>
					<text class="stat-number total">{{ totalCount }}</text>
				</view>
			</view>
		</view>

		<!-- 优先级统计 -->
		<view class="priority-stats">
			<view class="stats-title">优先级分布</view>
			
			<view class="priority-list">
				<view class="priority-item">
					<view class="priority-left">
						<view class="priority-dot high"></view>
						<text class="priority-name">高优先级</text>
					</view>
					<text class="priority-count">{{ highPriorityCount }}</text>
				</view>
				
				<view class="priority-item">
					<view class="priority-left">
						<view class="priority-dot medium"></view>
						<text class="priority-name">中优先级</text>
					</view>
					<text class="priority-count">{{ mediumPriorityCount }}</text>
				</view>
				
				<view class="priority-item">
					<view class="priority-left">
						<view class="priority-dot low"></view>
						<text class="priority-name">低优先级</text>
					</view>
					<text class="priority-count">{{ lowPriorityCount }}</text>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-container">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { statisticsAPI } from '@/utils/api.js';
	
	export default {
		data() {
			return {
				username: 'admin',
				memos: [],
				stats: {
					totalCount: 0,
					pendingCount: 0,
					completedCount: 0,
					highPriorityCount: 0,
					mediumPriorityCount: 0,
					lowPriorityCount: 0
				},
				storageKey: 'memoList'
			};
		},
		computed: {
			// 待完成数量（未完成的）
			pendingCount() {
				return this.stats.pendingCount || 0;
			},
			// 已完成数量
			completedCount() {
				return this.stats.completedCount || 0;
			},
			// 未完成数量（和待完成一样）
			unfinishedCount() {
				return this.pendingCount;
			},
			// 总计
			totalCount() {
				return this.stats.totalCount || 0;
			},
			// 高优先级数量
			highPriorityCount() {
				return this.stats.highPriorityCount || 0;
			},
			// 中优先级数量
			mediumPriorityCount() {
				return this.stats.mediumPriorityCount || 0;
			},
			// 低优先级数量
			lowPriorityCount() {
				return this.stats.lowPriorityCount || 0;
			}
		},
		onLoad() {
			this.loadStatistics();
			this.loadUserInfo();
		},
		onShow() {
			this.loadStatistics();
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function(){
					icon.show();
				},100)
			}
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						const user = JSON.parse(userInfo);
						this.username = user.email || user.username || 'admin';
					}
				} catch (e) {
					this.username = 'admin';
				}
			},
			
			// 从 API 加载统计信息
			async loadStatistics() {
				try {
					const res = await statisticsAPI.getBasic();
					
					if (res.code === 200) {
						this.stats = res.data;
					}
				} catch (error) {
					console.error('加载统计信息失败:', error);
				}
			},
			
			// 从本地加载备忘录（已废弃）
			loadMemos() {
				// 不再从本地加载，改用API获取统计数据
				console.log('使用API获取统计数据');
			},
			
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗?',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储的 token 和用户信息
							try {
								uni.removeStorageSync('token');
								uni.removeStorageSync('userInfo');
								
								uni.showToast({
									title: '已退出登录',
									icon: 'success',
									duration: 1500
								});
								
								// 跳转到登录页（使用reLaunch清空页面栈）
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}, 1500);
							} catch (e) {
								console.error('退出登录失败:', e);
								uni.showToast({
									title: '退出失败，请重试',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			
			// 跳转到首页并进行过滤
			goToHome(filterType) {
				// 切换到首页 tabbar
				uni.switchTab({
					url: '/pages/app-tabber/home',
					success: () => {
						// 使用事件通信传递过滤类型
						uni.$emit('filterMemos', { type: filterType });
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding: 20rpx;
	}

	/* 用户信息卡片 */
	.user-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #007aff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.avatar-text {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.username {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.user-subtitle {
		font-size: 24rpx;
		color: #999;
	}

	/* 统计容器 */
	.stats-container {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.stats-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.stats-list {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.stat-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		cursor: pointer;
		transition: background-color 0.2s;
	}
	
	.stat-item:active {
		background-color: #f5f5f5;
	}

	.stat-item:last-child {
		border-bottom: none;
	}

	.stat-left {
		display: flex;
		align-items: center;
	}

	.stat-label {
		font-size: 28rpx;
		color: #666;
	}

	.stat-number {
		font-size: 32rpx;
		font-weight: bold;
	}

	.stat-number.pending {
		color: #007aff;
	}

	.stat-number.completed {
		color: #34c759;
	}

	.stat-number.total {
		color: #666;
	}

	/* 优先级统计 */
	.priority-stats {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.priority-list {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.priority-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.priority-item:last-child {
		border-bottom: none;
	}

	.priority-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.priority-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 6rpx;
	}

	.priority-dot.high {
		background-color: #ff3b30;
	}

	.priority-dot.medium {
		background-color: #ff9500;
	}

	.priority-dot.low {
		background-color: #34c759;
	}

	.priority-name {
		font-size: 28rpx;
		color: #666;
	}

	.priority-count {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	/* 退出登录按钮容器 */
	.logout-container {
		margin-top: 20rpx;
	}
	
	.logout-btn {
		width: 100%;
		height: 72rpx;
		background-color: #fff;
		color: #333;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}
	
	.logout-btn::after {
		border: none;
	}
</style>

